<template>
	<div class="code-layout" v-if="detailData">
		<div class="code-materials" v-if="detailData">
			<div>
				<!--          <plug-state :statusStr="status" v-if="status"/>-->
				<br />
			</div>
		</div>
		<div class="code-info">
			<div>
				<h3 class="info-title">类型<i class="el-icon-edit-outline edit" @click="updateModelEva" /></h3>
				<ul class="info-item">
					<li>
						<span class="key">类型:</span>
						<span class="val">{{ formatterType(detailData.type) }}</span>
					</li>
					<li>
						<span class="key">转换镜像:</span>
						<span class="val" v-if="detailData.node_group_list.length">
							{{ detailData.node_group_list[0].image.name }}
						</span>
					</li>
					<li v-if="detailData.type === 3">
						<span>数据集:</span>
						<div v-for="item in detailData.dataset_list" :key="item.id">
							<span class="val">{{ item.dataset.name }}</span>
							<span class="val">{{ item.dataset.label }}</span>
							<span class="val">{{ item.dataset.desc }}</span>
						</div>
					</li>
					<div v-if="detailData.type == 1">
						<li>
							<span class="key">来源格式:</span>
							<span class="val">{{ detailData.source_format }}</span>
						</li>
						<li>
							<span class="key">目标格式:</span>
							<span class="val">{{ detailData.target_format }}</span>
						</li>
					</div>
				</ul>
			</div>
			<h3 class="info-title">基本信息</h3>
			<ul class="info-item">
				<li>
					<span class="key">名称:</span>
					<span class="val">{{ detailData.model.name }}</span>
				</li>
				<li>
					<span class="key"> 创建人： </span>
					<span class="val">{{
						detailData.create_user &&
							((detailData.create_user && detailData.create_user.nick_name) ||
								(detailData.create_user && detailData.create_user.username))
					}}</span>
				</li>
				<li>
					<span class="key">创建时间： </span>
					<span class="val">{{ detailData.create_time }}</span>
				</li>
			</ul>
		</div>

		<el-dialog :visible.sync="showModelEvaDialog" title="模型转换" width="840px">
			<el-form
				class="form myself-form"
				ref="evaModelForm"
				:model="evaModelForm"
				:rules="modelEvaSubmitRules"
				label-width="120px"
			>
				<el-form-item label="模型名称" prop="version">
					{{ detailData.model.name }}
				</el-form-item>
				<el-form-item label="模型版本" prop="version">
					{{ detailData.model_version.version }}
				</el-form-item>
				<el-form-item label="类型" prop="version">
					<el-select v-model="evaModelForm.type" class="full-extent-select">
						<el-option v-for="(item, i) in typeValue" :value="item.value" :label="item.label" :key="i"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="转换镜像">
					<el-select v-model="node_group_list.image_id" disabled class="full-extent-select">
						<el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="资源组">
					<el-select v-model="node_group_list.product_id" class="full-extent-select">
						<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
					</el-select>
				</el-form-item>

				<div v-if="evaModelForm.type == 1">
					<el-form-item label="来源格式" prop="version">
						<el-select v-model="evaModelForm.source_format" class="full-extent-select">
							<el-option v-for="(item, i) in format" :value="item" :label="item" :key="i"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="目标格式" prop="version">
						<el-select v-model="evaModelForm.target_format" class="full-extent-select">
							<el-option v-for="(item, i) in format" :value="item" :label="item" :key="i"> </el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="数据集" v-if="evaModelForm.type === 3">
					<plug-dataset :dataset_list="evaModelForm.dataset_list" @infoDataset="infoDataset" />
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="commitModelEva">确定</el-button>
					<el-button class="none-type" @click="cancelModelEva">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
// import plugState from '@/components/module/plug-state'
import plugDataset from "@/components/module/plug-in-dataset";
import { getAllImages } from "@/api/image";
// import {putModelEvaluatio, getModelEvaluatioeDetail} from '@/api/modelEva'
import { getAllProducts } from "@/api/product";
import { getAllModelEvaluationTypes } from "@/api/modelEvaType";
import { updataModelConvert, getModelConvertDetail } from "@/api/modelConvert";

export default {
	data() {
		return {
			typeValue: [
				{ label: "格式转换", value: 1 },
				{ label: "权值量化", value: 2 },
				{ label: "知识蒸馏", value: 3 },
				{ label: "模型剪枝", value: 4 },
				{ label: "矩阵分解", value: 5 },
				{ label: "低秩近似", value: 6 },
			],
			format: ["pt", "pth", "onnx", "trt"],
			modelId: this.$route.query.id,
			status: null,
			evaModelForm: null,
			showUpdateDockfileDialog: false,
			dockerFile: "",
			imageOptions: [],
			showModelEvaDialog: false,
			node_group_list: [],
			productOptions: [],
			modelEvaTyleOptions: [],
			showDiv: false,
			modelEvaSubmitRules: {},
		};
	},

	props: ["detailData"],
	watch: {
		detailData(val) {
			this.status = val.status;
			this.formData = val;
		},
	},
	async created() {
		this.evaModelForm = JSON.parse(JSON.stringify(this.detailData));
		this.getImageList();
		this.getProductList();
		this.getAllModelEvaTypes();
	},
	components: {
		// plugState,
		plugDataset,
	},

	async mounted() {
		this.$nextTick(() => {
			this.status = this.detailData.status;
		});
	},
	destroyed() {},
	methods: {
		formatterType(type) {
			let list = {
				1: "格式转换",
				2: "权值量化",
				3: "知识蒸馏",
				4: "模型剪枝",
				5: "矩阵分解",
				6: "低秩近似",
			};
			return list[type];
		},
		async getAllModelEvaTypes() {
			let res = await getAllModelEvaluationTypes();
			let data = res.data;
			data.push({ name: "自定义", id: "1" });
			this.modelEvaTyleOptions = data;
			console.log(" this.modelEvaTyleOptions", this.modelEvaTyleOptions);
		},
		async getProductList() {
			let res = await getAllProducts();
			this.productOptions = res.data;
		},
		async getImageList() {
			let res2 = await getAllImages({ visibility: 2, type: 3 });
			this.imageOptions = res2.data;
		},
		modelEvaTypeChange() {
			if (this.evaModelForm.type.id == "1") {
				this.showDiv = true;
			} else {
				this.showDiv = false;
			}
		},
		infoDataset(datasets) {
			this.evaModelForm.dataset_list = [];
			datasets.forEach((e) => {
				e.dataset_id = e.id;
				e.dataset = {
					name: e.name,
					alias: e.alias,
					id: e.id,
				};
			});
			this.evaModelForm.dataset_list = datasets;
			console.log("infoDataset", datasets);
		},
		async updateModelEva() {
			this.showModelEvaDialog = true;
			this.node_group_list = this.detailData.node_group_list[0];
		},
		commitModelEva() {
			if (this.evaModelForm.type !== 3) {
				this.evaModelForm.dataset_list = [];
			}

			console.log("commit");
			this.$refs.evaModelForm.validate(async (valid) => {
				if (valid) {
					if (this.evaModelForm.type == 1) {
						this.evaModelForm.source_format = null;
						this.evaModelForm.target_format = null;
					}
					await updataModelConvert(this.evaModelForm);
					this.showModelEvaDialog = false;
					this.$message.success("修改成功");
					this.freshData();
				}
			});
		},
		async freshData() {
			let res = await getModelConvertDetail({ id: this.detailData.id });
			if (res && res.data) {
				let data = res.data;
				if (data.type_id == 1) {
					data.type = { name: "自定义", id: "1" };
				}
				this.$emit("update:detailData", res.data);
			}
		},
		cancelModelEva() {
			this.showModelEvaDialog = false;
			this.evaModelForm = JSON.parse(JSON.stringify(this.detailData));
		},
	},
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>
